<!-- extends表明此页面继承自 base.html 文件 -->
{% extends "usercenter-base.html" %}
{% load staticfiles %}
<!-- 写入 base.html 中定义的 title -->
{% block title %}
    我收藏的课程
{% endblock title %}
<!-- 写入 base.html 中定义的 content -->
{% block content_user %}
    {# 课程 #}
    <div class="column is-full">
        <div class="box">
            <div class="columns is-multiline">
                {% for course in course_list %}
                    <div class="column is-3-desktop">
                        <div class="card">
                            <div class="card-image">
                                <figure class="image is-16by9">
                                    <img src="{{ MEDIA_URL }}{{ course.image }}"
                                         alt="Placeholder image">
                                </figure>
                            </div>
                            <div class="card-content has-background-primary">
                                <div class="media">
                                    <div class="media-left">
                                        <figure class="image is-48x48">
                                            <img class="is-rounded"
                                                 src="{{ MEDIA_URL }}{{ course.teacher.avatar }}"
                                                 alt="Placeholder image">
                                        </figure>
                                    </div>
                                    <div class="media-content">
                                        <p class="title is-4">
                                            <a href="{% url 'course:home' course.id %}"
                                               class="has-text-link-light">
                                                {{ course.name }}
                                            </a></p>
                                        <p class="subtitle is-6">@{{ course.teacher.name }}</p>
                                    </div>
                                </div>


                            </div>
                        </div>
                    </div>
                {% endfor %}
            </div>

        </div>
    </div>
{% endblock %}

